<script lang="ts">
	import { goto } from "$app/navigation";
	import { appState } from "../../stores/state.svelte";
	
</script>

<main>
	{#if appState.playItem}
		<div class="container-top">
			<div class="cover" style:background-image={ `url(${appState.playItem.cover_url})` }></div>

			<div class="info">
				<p>演员：{appState.playItem.actor.slice(0, 8).join(" ")}</p>
				<p>导演：{appState.playItem.director.slice(0, 4).join(" ")}</p>
				<p>类型：{appState.playItem.genres}</p>
				<p>年代；{appState.playItem.year}</p>
				<p>区域：{appState.playItem.region}</p>
				<p>语言：{appState.playItem.language}</p>
				<p>更新日期：{appState.playItem.update_time}</p>
				<p>更新状态：{appState.playItem.update_state}</p>
			</div>
		</div>

		<div class="container-bottom">
			{#each appState.playItem.play_infos as v,i}
				<div class="item" onclick={() => {appState.playIndex = i; goto("/info/player");}}>
					<p>{v.title}</p>
				</div>
			{/each}
		</div>		
	{/if}
</main>

<style lang="scss">
	@use "/src/styles/global.scss" as *;

	main {
		padding: 6px;
		display: grid;
		grid-template-rows: 1fr 1fr;
		overflow: hidden;
	}

	.container-top {
		// background-color: #ffffff;
		display: grid;
		grid-template-columns: 1fr 1fr;
		overflow: hidden;

		.cover {
			background-size: 100% 100%;
		}
		
		.info {
			padding-left: 5px;

			p {
				margin-bottom: 6px;
				font-size: 0.9rem;
			}
		}
	}
	
	.container-bottom {
		padding-top: 5px;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		gap: 5px;
		grid-auto-rows: min-content;
		overflow: scroll;

		.item {
			background-color: #ff2d2d46;
			min-height: 40px; max-height: 40px;
			display: flex;
			transition: 0.7s all;
			p {
				margin: auto;
			}
		}
		.item:hover {
			background-color: rgba(116, 116, 116, 0.999);
		}
	}
	@include hide-scrollbar($h:0px);
</style>